<template>
	<!--特权 -->
	<view class="privilege">
		<tabbar class="tabbar_" ref="myTab" @tabsChange="tabsChange" :pageName="pageName" :list="list" :current="current"
			:menuButtonInfo="menuButtonInfo"></tabbar>
    <!-- margin-left: 42rpx; -->
		<swiper class="swiperBox"
			:style="{height:'calc(100vh - ' + (2*menuButtonInfo.top+198)+ 'rpx)',top: (2*menuButtonInfo.top+198) +'rpx'}"
			:current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(newItem,newIndex) in listDelie" :key="newIndex">
				<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="getScrolltolower">
					<view class="noData" v-if="!newItem.delie">暂无数据</view>
					
					<recommend :status="status" :coupon="newItem.delie" @updataShow="updataShow"></recommend>
					
					
					<!-- <empty v-else title="暂无特权卡"></empty> -->
				</scroll-view>
				
			</swiper-item>
		</swiper>
		<perfectbox :img="imgs"  pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isShow" @ff_show="ffShows">
		</perfectbox>
	</view>
</template>

<script>
	import loading from '@/components/loading/loading.vue'
	import recommend from '@/components/recommend/newrecommend.vue'
	import perfectbox from "../../components/perfectbox/perfectbox.vue"
	import tabbar from '@/components/tabbar/tabbar.vue'
	import empty from "../../components/defaultpage/empty.vue"
	import network from "../../components/defaultpage/network.vue"
	export default {
		data() {
			return {
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				newCoupon: [],
				coupon: [],
				pageName: '特权',
				menuButtonInfo: {
					top: 25
				},
				list: [{
					name: '推荐',
					id: 'tuijian'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatux: '',
				listDelie: [{
					id: 'tuijian',
					isShow: true,
					delie: []
				}],
				pageNums: [1],
				pageSize: 7,
				status: 'Loading',
				iconType: 'flower',
				loadText: {
					loadmore: '已经到底了',
					loading: '努力加载中',
					nomore: '已经到底部了'
				},
				isTrue: true,
				imgs: '',
				isCircle: true,
				newStatus: ''
			}
		},
		onLoad() {

			this.init();
		},
		onShareAppMessage(res) {
		  if (res.from === 'button') {// 来自页面内分享按钮
		    console.log(res.target)
		  }
		  return {
		    title: 'chimian',
		    path: '/pages/privilege/privilege'
		  }
		},
		onShow() {
			this.isShow = Number(uni.getStorageSync('registerToast'));
			if (this.list.length == 1) {
				this.$apis.privilegeCategoryList().then(res => {
					console.log("res.c===>", res)
					if (res.code == 200) {
						// categoryId: 2, categoryName: "知识卡"
						let newList = []
						res.data.forEach(item => {
							this.list.push({
								name: item.categoryName,
								id: item.categoryId
							});
							this.listDelie.push({
								id: item.categoryId,
								delie: []
							})
							this.pageNums.push(1);
						});
						this.initData();
					}
				});
			}else{
				this.initData();
			}


		},
		components: {
			recommend,
			perfectbox,
			tabbar,
			empty,
			network,
			loading
		},
		methods: {
			// 数组去重
			//  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
			deWeight(arr){
				var obj = {};
				let  newArr = arr.reduce(function(item, next) {
				   obj[next.idx] ? '' : obj[next.idx] = true && item.push(next);
				   return item;
				}, []);
				return newArr;
			},
			getScrolltolower(){
				console.log('this.pageNums[this.swiperCurrent]--->',this.pageNums)
					// 加载前值为loadmore，加载中为loading，没有数据为nomore
					console.log("this.isTrue--->",this.isTrue)
					if (this.isTrue) {
						let pageNum = this.pageNums[this.swiperCurrent];
						console.log('this.pageNums[this.swiperCurrent]--->',pageNum)
						let newPageNums = JSON.parse(JSON.stringify(this.pageNums));
						newPageNums[this.swiperCurrent] = pageNum+1;
						console.log('newPageNums[this.swiperCurrent]--->',newPageNums[this.swiperCurrent])
						this.pageNums = JSON.parse(JSON.stringify(newPageNums));
						
						this.status = "Loading";
					
							this.initData(this.list[this.swiperCurrent].id, true);
							// this.status = 'loadmore';
					
					}
			},
            updataShow(data){
				// debugger
				this.isShow = data;
			},
			ffShows() {
				this.isShow = 2;
			},
			
			init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif
			},
			initData(initNum = 'tuijian', isBottom = false) {

				let newData = {};
				if (initNum != 'tuijian') {
					newData.categoryId = initNum
				} else {
					newData.recommend = 1;
					// debugger
				}
				// debugger
				newData.pageSize = this.pageSize;
				newData.pageNum = this.pageNums[this.swiperCurrent];
				// newData.


				this.$apis.privilegeList(
				newData
				).then(rex => {
					console.log(rex);
					if (rex.code == 200) {
						
	                    if(rex.rows.length != 0){
							let newCoupon = [];
							if(newData.pageNum == 1){
								let newListDeliess = JSON.parse(JSON.stringify(this.listDelie));
								// this.listDelie = [];
								
								newListDeliess[this.swiperCurrent].delie = [];
								this.listDelie = JSON.parse(JSON.stringify(newListDeliess));
								console.log('this.listDelie--->',this.listDelie)
							}
							let newListDelie = JSON.parse(JSON.stringify(this.listDelie));
							rex.rows.forEach(item => {
									newCoupon.push({
										src: item.privilegeImage,
										name: item.privilegeName,
										mian: item.coin,
										path: 'privilegedetail/privilegedetail',
										price: item.price,
										privilegeId: item.privilegeId,
										hasBuy: item.hasBuy,
										consumeType: item.consumeType,
										idx: item.privilegeId,
										privilegeNameEn: item.privilegeNameEn,
										privilegeTitle: item.privilegeTitle,
									});
							});
								newListDelie.forEach(newItem => {
									if (initNum == newItem.id) {
										newItem.delie = [...newItem.delie, ...newCoupon];
										console.log("newItem.delie====>", newItem.delie)
										newItem.delie = this.deWeight(newItem.delie);
										
									}
								})
								this.listDelie = JSON.parse(JSON.stringify(newListDelie))
								 console.log("this.listDelie====>", this.listDelie)
								this.$forceUpdate();
							
							this.status = "";
							this.newStatus = this.status
							if(rex.rows.length < this.pageSize){
								this.status = 'moduleNomore';
								this.newStatus = this.status
								this.isTrue = false;
								return;
							}
							
						}else{
							this.status = 'moduleNomore';
							this.newStatus = this.status
							this.isTrue = false;
							if(this.pageNums[this.swiperCurrent] == 1){
								this.status = 'empty';
								this.newStatus = this.status
							}
						}
					
					    
					}
					
					// this.listDelie  = this.unique(this.listDelie)
					

				});
			},
			unique(arr) {
				//Set数据结构，它类似于数组，其成员的值都是唯一的
				return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
			},

			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				
				
				this.status = 'Loading';
				let dx = e.detail.dx;
				// console.log("dx===>",dx)
				if(dx == 0){
					// debugger
					this.status = this.newStatus;
				}
				this.$refs.myTab.$refs.uTabs.setDx(dx);
				// this.isTransition = true;
			},
			// tabs通知swiper切换
			tabsChange(index) {
				// debugger
				// this.status = 'Loading';
				this.swiperCurrent = index;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {

				let current = e.detail.current;

				this.$refs.myTab.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},


		},

		watch: {
			swiperCurrent(newer, older) {
				if (newer != older) {
					
					
				
					
					
					
					
						this.initData(this.list[newer].id);
				
			
					this.isTrue = true;

				}
			},
			
			pageNum(newer, older){
				// debugger
				if(newer == 1){
					// debugger
					this.isCircle = true;
				}else{
					this.isCircle = false;
				}
				// isCircle
			}
		}
	}
</script>

<style lang="scss">
	.privilege {
		// .tabbar_{
		// 	position: relative;
		// 	left: -22rpx;
		// }
		// .u-tabs{
		// 	position: relative;
		// 	left: -22rpx;
		// }

		.swiperBox {
			background: #FFFFFF;
			position: fixed;
			// top: 0;
			// min-height: 100vh;
			// height: 100vh;
			width: 750rpx;

		}

		.swiper {
			// height: 100vh !important;
		}

		.swiper-item {
			// margin: 20rpx 40rpx 0px;
			overflow: scroll;
		}

		// .recommend_1{
		// 	padding: 0 !important;
		// }

		// .u-tabs-item {
		// 	// transition: all 1s; 
		// 	// width: 120rpx;
		// 	font-weight: 700 !important;
		// 	letter-spacing: 2rpx;
		// }
		.circle {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		.circle_ {
			position: absolute;
			left: 50%;
			transform: translateX(-100%);
		}

.u-tabs-item{
		    // width: 145rpx !important;
		    box-sizing: border-box !important;
			font-weight: 700 !important;
			letter-spacing: 2rpx;
	}

		// .u-tabs-item{
		// 	font-weight: bold !important;
		// }
	}
	.noData{
		font-size: 36rpx;
		font-weight: 500;
		color: #000000;
		position: fixed;
		top: 40%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
